<template>
  <el-dialog
    :model-value="modelValue"
    width="30%"
    :title="title"
    align-center
    v-bind="$attrs"
    draggable
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <div>
      <slot name="content"></slot>
    </div>
    <template #footer>
      <el-button :disabled="loading" @click="handleClose(false)">
        {{ disabled ? "关闭" : "取消" }}
      </el-button>
      <el-button
        v-if="!disabled"
        type="primary"
        :loading="loading"
        @click="handleSave"
      >
        保存
      </el-button>
    </template>
  </el-dialog>
</template>
<script setup>
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  title: {
    type: String,
    default: "提示",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue", "close","save"]);
const handleSave = () => {
  emit("save");
};
const handleClose = () => {
  emit("update:modelValue", false);
  emit("close");
};
</script>
